<template>
    <div class="table-page">
        <GiTable
            row-key="id"
            title=""
            :data="dataList"
            :columns="columns"
            :loading="loading"
            :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
            :pagination="pagination"
            :disabled-tools="['size']"
            :disabled-column-keys="['userName']"
            @refresh="search"
        >
            <template #toolbar-left>
                <span class="gi_title" style="font-size: 16px;font-weight: 600">
                     用戶列表
                </span>
            </template>
            <template #toolbar-right>
                <a-input v-model="queryForm.filterName" placeholder="請輸入" allow-clear>
                    <template #prefix>
                        <icon-search/>
                    </template>
                </a-input>
                <a-button @click="search" type="primary">
                    <template #icon>
                        <icon-search/>
                    </template>
                    <template #default>查詢</template>
                </a-button>
                <a-button style="color: #A26028" @click="onExport">
                    <template #icon><icon-download /></template>
                    <template #default>導出名單</template>
                </a-button>
            </template>
            <template #nickName="{ record }">
                <GiCellAvatar :avatar="getAvatar(record.userHeadImage, record.sex)" :name="record.nickName"
                              is-link
                              @click="onDetail(record)"/>
            </template>
            <template #sex="{ record }">
                <a-tag v-if="record.sex === 1" color="arcoblue" size="small" class="gi_round">
                    <template #icon><icon-man /></template>
                    <template #default>男</template>
                </a-tag>
                <a-tag v-else-if="record.sex === 2" color="magenta" size="small" class="gi_round">
                    <template #icon><icon-woman /></template>
                    <template #default>女</template>
                </a-tag>
                <a-tag v-else color="gray" size="small" class="gi_round">
                    <template #default>未知</template>
                </a-tag>
            </template>

            <template #roleNames="{ record }">
                <a-tag>
                    {{ record.roleNames }}
                </a-tag>
            </template>
            <template #status="{ record }">
             <span v-if="record.status === 1">
                <icon-check-circle-fill class="success"/>
                <span>启用</span>
              </span>
                <span v-if="record.status === 2">
                <icon-minus-circle-fill class="warning"/>
                <span>禁用</span>
             </span>
                <span v-if="record.status === 4">
                <icon-minus-circle-fill class="warning"/>
                <span>未激活</span>
             </span>
            </template>
            <template #isSystem="{ record }">
                <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
                <a-tag v-else color="arcoblue" size="small">否</a-tag>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-link @click="onDetail(record)">詳情</a-link>
                    <a-link
                        v-permission="['system:customer:delete']"
                        status="danger"
                        :disabled="record.disabled"
                        @click="onDelete(record)"
                    >
                        删除
                    </a-link>
<!--                    <a-dropdown>-->
<!--                        <a-button type="text" size="mini">-->
<!--                            <template #icon>-->
<!--                                <icon-more :size="16"/>-->
<!--                            </template>-->
<!--                        </a-button>-->
<!--                        <template #content>-->
<!--                            <a-doption @click="onResetPwd(record)">-->
<!--                                重置密码-->
<!--                            </a-doption>-->
<!--                        </template>-->
<!--                    </a-dropdown>-->
                </a-space>
            </template>
        </GiTable>
        <CustomerAddModal ref="CustomerAddModalRef" @save-success="search"/>
        <ResetPwdModal ref="ResetPwdModalRef"/>
    </div>
</template>

<script setup lang="ts">
import CustomerAddModal from './CustomerAddModal.vue'
import {
    type CustomerQuery, type CustomerDto,
    deleteCustomer,
    unActivityPage, exportUnActivityCustomer, exportCustomer
} from '@/apis/mch/customer'
import type {Columns, Options} from '@/components/GiForm'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useTable} from '@/hooks'
import {isMobile} from '@/utils'
import getAvatar from '@/utils/avatar'
import ResetPwdModal from "@/views/mch/customer/ResetPwdModal.vue";
import {Message, Modal} from "@arco-design/web-vue";
const router = useRouter()
defineOptions({name: 'SystemCustomer'})
const queryForm = reactive<CustomerQuery>({
})
import { useDownload } from '@/hooks'
const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
} = useTable((pageNum) => unActivityPage({...queryForm, ...pageNum}), {immediate: true})

const options: Options = reactive({
    form: {layout: 'inline'},
    col: {xs: 24, sm: 24, md: 5, lg: 4, xl: 4, xxl: 4},
    btns: {col: {xs: 24, sm: 24, md: 7, lg: 8, xl: 6, xxl: 6}},
    fold: {enable: true, index: 1, defaultCollapsed: true}
})

const queryFormColumns: Columns = reactive([
    {
        type: 'input',
        field: 'filterName',
        item: {
            hideLabel: true
        },
        props: {
            placeholder: '用戶名稱',
            allowClear: true
        }
    },
    {
        type: 'range-picker',
        field: 'createTime',
        item: {
            hideLabel: true
        },
        col: {xs: 24, sm: 24, md: 10, lg: 9.5, xl: 9, xxl: 8}
    }
])



const columns: TableInstanceColumns[] = [
    {title: 'UID', dataIndex: 'customerId', align: 'center', show: true, width: 80, fixed: !isMobile() ? 'left' : undefined},
    {title: '賬號名稱', dataIndex: 'loginName', align: 'center', show: true, width: 80, fixed: !isMobile() ? 'left' : undefined},
    {title: '登入密碼', dataIndex: 'enablePassword', align: 'center', show: true, width: 80, fixed: !isMobile() ? 'left' : undefined},
    {
        title: '綁定用戶',
        dataIndex: 'nickName',
        slotName: 'nickName',
        ellipsis: true,
        tooltip: true,
        width: 100
    },
    {title: '賬號狀態', slotName: 'status', align: 'center', width: 80},
    {
        title: '賬戶激活時間',
        dataIndex: 'activateTime',
        slotName: 'activateTime',
        ellipsis: true,
        align: 'center',
        tooltip: true,
        sortable: {
            sortDirections: ['ascend', 'descend']
        },
        width: 150
    },
    {title: '创建时间', dataIndex: 'createTime',sortable: {
            sortDirections: ['ascend', 'descend']
        }, width: 180},
    {
        title: '操作',
        slotName: 'action',
        width: 80,
        align: 'center',
        fixed: !isMobile() ? 'right' : undefined,
    }
]

const CustomerAddModalRef = ref<InstanceType<typeof CustomerAddModal>>()

// 重置
const reset = () => {
    queryForm.filterName = undefined
    queryForm.status = undefined
    queryForm.createTime = []
    search()
}

// 删除
const onDelete = (record: CustomerDto) => {
    return handleDelete(() => deleteCustomer(record.customerId), {
        content: `是否确定删除 [${record.nickName}]？`,
        showModal: true
    })
}

// 新增
const onAdd = () => {
    CustomerAddModalRef.value?.onAdd()
}

// 导出
const onExport = () => {
    Modal.warning({
        title: "導出用戶",
        content: "確定導出用戶信息嗎？",
        cancelText: '取消',
        okButtonProps: {status: 'danger'},
        hideCancel: false,
        draggable: true,
        maskClosable: false,
        onOk: async () => {
            await useDownload(() => exportUnActivityCustomer(queryForm))
        },
    });
}
// 修改
const onUpdate = (record: CustomerDto) => {
    Message.success('在開發中')
}

// 详情
// 详情
const onDetail = (record: CustomerDto) => {
    router.push({path: '/business/customer/detail', query: {id: record.customerId}})
}
const ResetPwdModalRef = ref<InstanceType<typeof ResetPwdModal>>()

// 重置密码
const onResetPwd = (record: CustomerDto) => {
    ResetPwdModalRef.value?.onReset(record.customerId)
}
</script>

<style lang="scss" scoped>
.page_header {
    flex: 0 0 auto;
}

.page_content {
    flex: 1;
    overflow: auto;
}
</style>
